<!--
 * @Author: wangming
 * @Date: 2021-10-28 11:21:11
 * @LastEditors: wangming
 * @LastEditTime: 2021-10-28 12:52:32
 * @FilePath: /hanma-application-designer-fed/src/components/Imagepreview/image-layout.vue
 * @Description: 
-->
<template>
  <div
    class="rel dib imagelayout"
    :style="{ width: width + 'px', height: height + 'px' }"
  >
    <div class="abs dn" v-if="autoButtons.length > 0">
      <div class="wh ks-row-middle-around">
        <i
          class="iconfont f22 poi"
          :class="i.icon"
          v-for="(i, index) in autoButtons"
          :key="index"
          @click="i.callback"
        ></i>
      </div>
    </div>
    <img :src="src" />
  </div>
</template>

<script>
import ImageViewer from "./index";
import { downloadFileSrc } from "@/utils/util";
export default {
  props: {
    width: {
      type: Number,
      default: 100,
    },
    height: {
      type: Number,
      default: 100,
    },
    src: {
      type: String,
      default: "",
    },
    operation: {
      type: String,
      default: "preview,download",
    },
  },
  computed: {
    autoButtons() {
      return this.btnlist.filter((i) => this.operation.indexOf(i.key) > -1);
    },
  },
  data() {
    return {
      btnlist: [
        {
          icon: "iconyulan",
          name: "预览",
          key: "preview",
          callback: () => {
            ImageViewer.preview({ previewSrcList: [this.src], scale: 3 });
          },
        },
        {
          icon: "iconxiazai",
          name: "下载",
          key: "download",
          callback: () => {
            downloadFileSrc(this.src, "二维码");
          },
        },
      ],
    };
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.imagelayout {
  &:hover > div {
    display: block;
  }
  div {
    background-color: rgba(0, 0, 0, 0.2);
    width: 100%;
    height: 100%;
  }
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
